<template>
	<scroll-view class="categoryLevelTwo" scroll-y>
		<view
			class="categoryLevelTwoItem"
			@click="selectCategory(index, item)"
			:class="{ active: selectedItem.name === item.name }"
			v-for="(item, index) in categoryList"
			:key="index"
		>
			<text>{{ item.name || `分类${index + 1}` }}</text>
		</view>
	</scroll-view>
</template>

<script>
export default {
	name: 'JCategoryLevelTwo',
	props: {
		// 分类列表数据
		categoryList: {
			type: Array,
			default: () => []
		},
		// 当前选中的分类项
		selectedItem: {
			type: Object,
			default: () => ({})
		}
	},
	methods: {
		// 选择二级分类
		selectCategory(index, item) {
			console.log('选择二级分类:', item, '索引:', index);

			// 向父组件发送事件
			this.$emit('category-change', item, index);
		}
	}
};
</script>

<style lang="less" scoped>
@categoryLevelTwoWidth: 160rpx;
@basecolor: #246ef9;

.categoryLevelTwo {
	flex-shrink: 0;
	width: @categoryLevelTwoWidth;
	height: 100%;
	background: #f3f4f6;
	overflow: hidden;

	.categoryLevelTwoItem {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
		width: 100%;
		min-height: 70rpx;
		padding: 20rpx;
		padding-right: 10rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 1.3;
		border-radius: 0;

		&.active {
			background: #fff;
			color: #333;
			color: @basecolor;
			font-weight: 600;
			border-radius: 0;

			&:before {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				content: '';
				width: 6rpx;
				height: 36rpx;
				background: #246ef9;
				border-radius: 0 6rpx 6rpx 0;
			}
		}

		// 选中项的上一个选项 - 下圆角
		&.active + .categoryLevelTwoItem {
			background: #fff;
			&:before {
				content: '';
				border-radius: 0 20rpx 0 0;
				width: 100%;
				height: 100%;
				background: #f3f4f6;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
		}

		// 选中项的下一个选项 - 上圆角
		&:has(+ .active) {
			background: #fff;
			&:before {
				content: '';
				border-radius: 0 0 20rpx 0;
				width: 100%;
				height: 100%;
				background: #f3f4f6;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
		}
	}
}
</style>
